﻿@{
    View.Title = "HeatMap";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
        var markers = new Array();
        var colorSchemeArray = new Array();
        var map;
        var initialZoom = 5;
        var currentHeatMap;
        var mapDataTimeOutID = 0;
        var facilityData = new Array();
        var currentMarker;

        function initialize() {
            var myLatlng = new google.maps.LatLng(30.1238660, -92.0706730);
            var selectedColorScheme = "classic";

            var mapOptions = getHeatMapObject(selectedColorScheme);

            //Create a map
            map = new google.maps.Map(document.getElementById("map"), mapOptions);
            //set the default center
            map.setCenter(myLatlng);
            //set the default zoom 
            map.setZoom(initialZoom);
            //add the default overlaycc
            map.overlayMapTypes.insertAt(0, mapOptions);
            //Set the map type
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
            //map.addControl(new GLargeMapControl());
        }

        function getHeatMapObject(colorScheme) {
            var heatMapOptions = {
                getTileUrl: function (tile, zoom) {
                    return '/quakes/Home/Tile' +
                                    '?colorScheme=' + colorScheme +
                                    '&zoom=' + zoom +
                                    '&x=' + tile.x +
                                    '&y=' + tile.y;
                },
                tileSize: new google.maps.Size(256, 256),
                isPng: true,
                releaseTile: function (tile, zoom) {
                    //Called when a tile is out of view
                },
                name: colorScheme + "Heat Map"
            };
            return new google.maps.ImageMapType(heatMapOptions);
        }

        /*function changeColorScheme(control) {
            //Remove the current one
            map.overlayMapTypes.removeAt(0);
            if (colorSchemeArray[control.value] == null) {
                //Get a new one
                colorSchemeArray[control.value] = getHeatMapObject(control.value);
            }
            //Now set it
            map.overlayMapTypes.insertAt(0, colorSchemeArray[control.value]);
        }*/
        $(document).ready(function () {
            initialize();
        });
    </script>

<div id="map" style="float:left; width:100%; height:100%;">&nbsp;</div>
@*<div style="float:right;width:18%; vertical-align:top;">
    <div style="float:left;">Color Schemes</div>
    <div style="float:right;">
        <select id="colorSchemes" onchange="javascript:changeColorScheme(this);">
            @foreach (string cs in gheat.GHeat.AvailableColorSchemes())
            {
                <option>@cs</option>
            }
        </select>
    </div>
    <div style="clear:both;"></div>
</div>             
<div style="clear:both;"></div>*@
